<template>
  <div class="header">
    <div>
      <!-- 天气 -->
      <p>合肥 14℃ 晴 东风 3级</p>
    </div>
    <div class="user-info">
      <!-- 用户 -->
      <a-dropdown :trigger="['hover']" @click="(e) => e.preventDefault()">
        <div>
          <img :src="require('@/assets/images/defaultRound.png')" alt />
          <span>业务管理员</span>
          <i class="icon suncnui suncnui-icon-jiantou"></i>
        </div>
        <a-menu slot="overlay" class="sys-opts">
          <a-menu-item key="0" @click="settings">个人资料</a-menu-item>
          <a-menu-item @click="settingsPwd" key="1">修改密码</a-menu-item>
          <!-- <a-menu-item @click="logout" key="2">个人设置</a-menu-item> -->
        </a-menu>
      </a-dropdown>
      <i class="icon suncnui suncnui-icon-tongzhi"></i>
      <i class="icon suncnui suncnui-icon-tuichu1" @click="logout"></i>
    </div>

    <userInfo ref="userInfo" />
    <settingPwd ref="settingPwd" />
  </div>
</template>
<script>
import { mapMutations } from 'vuex'
import userInfo from './userInfo'
import settingPwd from './settingPwd'
export default {
  data() {
    return {}
  },
  components: {
    settingPwd,
    userInfo
  },
  mounted() {},
  methods: {
    ...mapMutations({
      setIsShowSecondMenu: 'SET_ISSHOWSECONDMENU'
    }),
    settings() {
      this.$refs.userInfo.showModal()
    },
    settingsPwd() {
      this.$refs.settingPwd.showModal()
    },
    logout() {
      localStorage.removeItem('TOKEN')
      this.setIsShowSecondMenu(false)
      this.$router.push('/login')
    }
  }
}
</script>
<style lang="less" scoped>
.header {
  display: flex;
  justify-content: space-between;
  height: 50px;
  line-height: 50px;
  padding-left: 30px;
  border-bottom: 1px solid #eee;
}
.user-info {
  display: flex;
  justify-content: space-between;
}
.ant-dropdown-trigger {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  &:hover {
    span {
      color: @link-hover-color;
    }
    i {
      transform: rotate(180deg);
    }
  }
  img {
    width: 50px;
    height: 30px;
    border-radius: 50%;
    padding: 0 10px;
  }
  span {
    font-size: 14px;
  }
  i {
    transition: all 0.3s;
  }
}
.suncnui-icon-tongzhi,
.suncnui-icon-tuichu1 {
  color: #1470ad;
  font-size: 24px;
  padding: 0 15px;
  cursor: pointer;
}
</style>